// 服务卡片轮播
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有元素
  const carousel = document.querySelector('.services-carousel');
  const container = document.querySelector('.services-swiper');
  const wrapper = document.querySelector('.swiper-wrapper-service');
  const slides = document.querySelectorAll('.swiper-slide-service');
  const nextBtn = document.querySelector('.services-button-next');
  const prevBtn = document.querySelector('.services-button-prev');
  const pagination = document.querySelector('.services-pagination');

  // 设置初始状态
  let currentIndex = 0;
  let slideWidth = 350; // 卡片宽度
  let slideMargin = 0; // 卡片间距
  let slidesToShow = 1; // 默认显示数量
  let autoplayInterval = null;

  // 根据窗口宽度设置显示数量
  function updateSlidesToShow() {
    if (window.innerWidth >= 1200) {
      slidesToShow = 3;
    } else if (window.innerWidth >= 992) {
      slidesToShow = 2;
    } else {
      slidesToShow = 1;
    }
    updateCarousel();
  }

  // 更新轮播位置
  function updateCarousel(smooth = true) {
    const offset = -currentIndex * (slideWidth + slideMargin);
    wrapper.style.transition = smooth ? 'transform 0.5s ease' : 'none';
    wrapper.style.transform = `translateX(${offset}px)`;
    updatePagination();
  }

  // 创建分页指示器
  function createPagination() {
    pagination.innerHTML = '';
    const totalPages = Math.ceil(slides.length / slidesToShow);

    for (let i = 0; i < totalPages; i++) {
      const dot = document.createElement('span');
      dot.classList.add('pagination-dot');
      dot.addEventListener('click', () => {
        currentIndex = i * slidesToShow;
        updateCarousel();
      });
      pagination.appendChild(dot);
    }
    updatePagination();
  }

  // 更新分页指示器状态
  function updatePagination() {
    const dots = pagination.querySelectorAll('.pagination-dot');
    const activePage = Math.floor(currentIndex / slidesToShow);

    dots.forEach((dot, index) => {
      if (index === activePage) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  // 下一张
  function nextSlide() {
    if (currentIndex < slides.length - slidesToShow) {
      currentIndex++;
    } else {
      // 循环到第一张
      currentIndex = 0;
      wrapper.style.transition = 'none';
      setTimeout(() => {
        wrapper.style.transition = 'transform 0.5s ease';
        updateCarousel();
      }, 50);
    }
    updateCarousel();
  }

  // 上一张
  function prevSlide() {
    if (currentIndex > 0) {
      currentIndex--;
    } else {
      // 循环到最后一张
      currentIndex = slides.length - slidesToShow;
      wrapper.style.transition = 'none';
      setTimeout(() => {
        wrapper.style.transition = 'transform 0.5s ease';
        updateCarousel();
      }, 50);
    }
    updateCarousel();
  }

  // 开始自动播放
  function startAutoplay() {
    stopAutoplay();
    autoplayInterval = setInterval(nextSlide, 3000);
  }

  // 停止自动播放
  function stopAutoplay() {
    if (autoplayInterval) {
      clearInterval(autoplayInterval);
    }
  }

  // 添加事件监听
  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoplay();
    startAutoplay();
  });

  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoplay();
    startAutoplay();
  });

  // 鼠标悬停时暂停自动播放
  carousel.addEventListener('mouseenter', stopAutoplay);
  carousel.addEventListener('mouseleave', startAutoplay);

  // 窗口大小改变时更新
  window.addEventListener('resize', updateSlidesToShow);

  // 添加样式
  const style = document.createElement('style');
  style.textContent = `
    .services-carousel {
      position: relative;
    }
    .swiper-wrapper-service {
      display: flex;
      transition: transform 0.5s ease;
    }
    .swiper-slide-service {
      flex-shrink: 0;
    }
    .services-button-next,
    .services-button-prev {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      z-index: 10;
    }
    .services-button-next {
      right: 3px;
    }
    .services-button-prev {
      left: 3px;
    }
    .services-button-next:after {
      content: '→';
      font-size: 20px;
      color: #e41e26;
    }
    .services-button-prev:after {
      content: '←';
      font-size: 20px;
      color: #e41e26;
    }
    .services-pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .pagination-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 0 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .pagination-dot.active {
      background-color: #e41e26;
    }
  `;
  document.head.appendChild(style);

  // 初始化
  updateSlidesToShow();
  createPagination();
  startAutoplay();
});